<template>
    <basic-container>
        <el-tabs v-model="tabActiveName" @tab-click="handleClick">
            <el-tab-pane :label=orderNum name="first">
            </el-tab-pane>
            <el-tab-pane :label=earningsPrice name="second">
            </el-tab-pane>
            <el-tab-pane :label=saleTotalPrice name="third">
            </el-tab-pane>
        </el-tabs>

        <span>时间筛选: </span>
        <el-date-picker placeholder="开始时间" @change="getBeforeTime" value-format="yyyyMMdd" v-model="beginTime" type="date" size="mini">
        </el-date-picker>

        <span style="margin-left:10px">至</span>

        <el-date-picker style="margin-left: 10px" placeholder="结束日期" @change="getTime" value-format="yyyyMMdd" v-model="endTime" type="date" size="mini">
        </el-date-picker>

        <el-button style="margin-left: 10px" type="primary" size="small" plain  @click.stop="search()">搜索</el-button>
        <el-button style="margin-left: 10px" type="primary" size="small" plain  @click.stop="clear()">清空</el-button>
        <avue-echart-line :theme="theme" :option="option" :data="data" width="1000"></avue-echart-line>
    </basic-container>
</template>



<script>
    import {
        getList
    } from "@/api/distribution/disEarningsStatistics";
    export default {
        data() {
            return {
                theme:'',
                tabActiveName: 'first', //tab页切换
                orderNum:'三级分销成交订单数',
                earningsPrice:'支出分佣金额',
                saleTotalPrice:'三级分销成交总额',

                orderNumArray:[],
                earningsPriceArray:[],
                saleTotalPriceArray:[],
                beginTime: '',
                endTime: '',
                data:{
                    categories: [],
                    series: [
                        {
                            name: "分销成交订单数",
                            data: []
                        },
                    ]
                },
                option: {
                    switchTheme:true,
                    width: 1200,
                    height: 600,
                    title: '手机大比拼',
                    smooth: true,//是否顺滑
                    areaStyle: true,//是否面积
                }
            }
        },
        created() {
            this.transferMethod()
        },
        mounted(){
            console.log(this.data.series)
            console.log(this.option)
        },
        methods: {
            handleClick(tab) {
                //this.beginTime = '';
                //this.endTime = '';
                //tab页切换
                if (tab.name == "first") {
                    this.data.series[0].data = this.orderNumArray;
                    this.data.series[0].name = "分销成交订单数";
                } else if (tab.name == "second") {
                    this.data.series[0].data = this.earningsPriceArray;
                    this.data.series[0].name = "支出分佣金额";
                } else if (tab.name == "third") {
                    this.data.series[0].data = this.saleTotalPriceArray;
                    this.data.series[0].name = "分销成交总额";
                }
            },

            getBeforeTime(){
                if(this.endTime){
                    if (this.beginTime > this.endTime) {
                        this.$message({
                            type: "error",
                            message: "开始时间不能大于结束时间"
                        });
                        this.beginTime = ''
                    }
                }
            },

            getTime() {
                console.log(this.beginTime)
                console.log(this.endTime)
                if (this.beginTime > this.endTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endTime = ''
                }
            },
            search(){
                    this.orderNum = '分销成交订单数',
                    this.earningsPrice = '支出分佣金额',
                    this.saleTotalPrice = '分销成交总额',
                    this.transferMethod()
            },
            clear(){
                this.beginTime = '';
                this.endTime = '';
                this.orderNum = '分销成交订单数',
                this.earningsPrice = '支出分佣金额',
                this.saleTotalPrice = '分销成交总额',
                this.transferMethod()
            },
            transferMethod(){
                getList(this.beginTime,this.endTime).then(res => {
                    if(res.data.code == 200){
                        let obj = res.data.data.userEarningsStatisticsResults;
                        let newArrayStatTime = [];
                        let newArrayOrderNum = [];
                        let newArrayEarningsPrice = [];
                        let newArraySaleTotalPrice = [];
                        let tempData = res.data.data;
                        this.orderNum = this.orderNum + '(' +tempData.orderNum + ')';
                        this.earningsPrice = this.earningsPrice + '(' +tempData.earningsPrice +')';
                        this.saleTotalPrice = this.saleTotalPrice + '(' +tempData.saleTotalPrice +')';

                        if(obj.length>0){
                            for(let i=0;i<obj.length;i++){
                                newArrayStatTime.push(obj[i].statTime);
                                newArrayOrderNum.push(obj[i].orderNum);
                                newArrayEarningsPrice.push(obj[i].earningsPrice);
                                newArraySaleTotalPrice.push(obj[i].saleTotalPrice);
                            }
                        }
                        this.data.categories = newArrayStatTime;
                        //this.data.series[0].data = newArrayOrderNum;
                        this.orderNumArray = newArrayOrderNum;
                        this.earningsPriceArray = newArrayEarningsPrice;
                        this.saleTotalPriceArray = newArraySaleTotalPrice;
                        this.handleClick({name:this.tabActiveName})
                        console.log(res.data.data)
                    }
                    else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                })
            }
        }
    }
</script>